<!-- 
      display.html
      WarCache Google Gadget - ability detail
      
      Created by NerfedWar <nerfed.war@gmail.com> on 2010-11-17.
      Copyright 2010 NerfedWar. All rights reserved.
 -->

<link rel="stylesheet" href="http://warcache.googlecode.com/hg/jquery-ui.css" type="text/css" media="all" />

<style>

body {
	margin: 0;
	padding: 0;
	border: none;
	background: none no-repeat;
}

#abilityDetail {
	width: 100%;
	height: 600px;
	background: black;
}

#abilityIcon {
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 64px;
}

#abilityIconSurround {
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 64px;
}

#abilityExtra {
	position: absolute;
	top: 0;
	left: 400px;
	width: 400px;
	height: 200px;
}

#abilityExtraTable {
	width: 100%;
	border: 1px dotted #2f4f72;
	color: #ebca7d;
	font: verdana;
	font-size: 13px;
	line-height: 20px;
	font-weight: bold;
	padding: 0;
	margin: 0;
}

.abilityExtraTable_value {
	text-align: center;
	color: #2f4f72;
}

#tt {
	position: relative;
	top: 0;
	left: 100px;
}

#ttNorth {
	width: 243px;
	height: 7px;
	background: url(http://warcache.googlecode.com/hg/show_tooltip_north.png);
}

#ttCenter {
	width: 243px;
	height: auto;
	background: url(http://warcache.googlecode.com/hg/show_tooltip_center.png);
}

#ttCenterTable {
	width: 100%;
	border: none;
	margin: 0;
	padding: 0 8px 0 8px;
	color: white;
	font: verdana;
	font-size: 11px;
	line-height: 11px;
}

#ttSouth {
	width: 243px;
	height: 7px;
	background: url(http://warcache.googlecode.com/hg/show_tooltip_south.png);
}

.ttTitleRow {
	color: #ebca7d;
	font-size: 12px;
	font-weight: bold;
}

.ttRight {
	text-align: right;
}

.ttSeperator {
	padding: 0;
	margin: 0;
	font-size: 2px;
	line-height: 2px;
}

.ttRequirementRow {
	color: #2f4f72;
}

#tooltip_English_description {
	color: #ebca7d;
}

#comments {
	overflow: auto;
	margin: 0 32px 8px 32px;
	height: 300px;
}

.comment {
	color: #2f4f72;
	font: verdana;
	font-size: 12px;
	line-height: 12px;
}

#commentHeader {
	color: #ebca7d;
	font: verdana;
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	margin: 0 32px 16px 32px;
}


</style> 
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAARChIkzotDS7mBVsWYbS07xSIfeHlvFYvOEZAYiIJwAzWpNDGIhT9VcgTBKDlb6IW-Z0595N2H-7TVg"></script>  

<script type="text/javascript">

// load libraries and set onload function
google.load("jquery", "1.4.3");
google.load("jqueryui", "1.8.6");
google.load('visualization', '1', {
    'packages': ['table']
});
google.setOnLoadCallback(init);

var dataSourceUrl = "http://spreadsheets.google.com/tq?key=0AhqHFpvBhkNTdGF5MnNDU09iVjF5eFh3emlJSVZfVXc&pub=1";
var dataTable = null;
var commentsSourceUrl = "http://spreadsheets.google.com/tq?key=0AhqHFpvBhkNTdGdpYzdTcDFENTRnYVRuU1lEU1FFZHc&pub=1";
var commentsTable = null;
var columnLabelToColumnIdMappings = new Array();
var id = 245;
// set Flee to be the default id for testing
function init() {

    var query = new google.visualization.Query(dataSourceUrl);
    var commentsQuery = new google.visualization.Query(commentsSourceUrl);

    // store/get id
    if (getId() > 0) {
        id = parseInt(getId());
    }

    // perform comments query
    commentsQuery.setQuery("select * where A=" + id);
    commentsQuery.send(
    function(data) {
        commentsTable = data.getDataTable();
        for (i = 0; i < commentsTable.getNumberOfRows(); i++) {
            var date = commentsTable.getValue(i, 1);
            var time = commentsTable.getValue(i, 2);
            var authorName = commentsTable.getValue(i, 3);
            var authorEmail = commentsTable.getValue(i, 4);
            var comment = commentsTable.getValue(i, 5);
            var current = $('#comments').html();
            $('#comments').html("<p class='comment'><b>" + authorName + "</b> said: " + comment + "</p>" + current);

        }
    }
    );

    // perform query
    query.setQuery("select * where A=" + id);
    query.send(
    function(data) {

        dataTable = data.getDataTable();

        for (i = 0; i < dataTable.getNumberOfColumns(); i++) {
            columnLabelToColumnIdMappings[dataTable.getColumnLabel(i)] = i;
        }

        // fill in icon
        $("#abilityIcon").attr("src", "http://dl.dropbox.com/u/8317512/icons/" + getValueByLabel('iconId', 0) + ".jpg");

        // fill in tooltip
        $("#tooltip_English_name").html(getValueByLabel('tooltip.English.name', 0));
        $("#tooltip_English_type").html(getValueByLabel('tooltip.English.type', 0));
        $("#tooltip_English_specline").html(getValueByLabel('tooltip.English.specline', 0));
        $("#tooltip_English_level").html("Level 40");
        $("#tooltip_English_cost").html(getValueByLabel('tooltip.English.cost', 0));
        $("#tooltip_English_range").html(getValueByLabel('tooltip.English.range', 0));
        $("#tooltip_English_casttime").html(getValueByLabel('tooltip.English.casttime', 0));
        $("#tooltip_English_cooldown").html(getValueByLabel('tooltip.English.cooldown', 0));
        if (columnLabelToColumnIdMappings['tooltip.English.requirement1']) {
            $("#tooltip_English_requirement1").html(getValueByLabel('tooltip.English.requirement1', 0));
        } else {
            $("#tooltip_English_requirement1").hide();
        }
        if (columnLabelToColumnIdMappings['tooltip.English.requirement2']) {
            $("#tooltip_English_requirement2").html(getValueByLabel('tooltip.English.requirement2', 0));
        } else {
            $("#tooltip_English_requirement2").hide();
        }
        if (columnLabelToColumnIdMappings['tooltip.English.requirement3']) {
            $("#tooltip_English_requirement3").html(getValueByLabel('tooltip.English.requirement3', 0));
        } else {
            $("#tooltip_English_requirement3").hide();
        }
        $("#tooltip_English_description").html(getValueByLabel('tooltip.English.descriptions.40', 0));

        // fill in extras
        $("#abilityExtraTable_minimumRank").html(getValueByLabel('minimumRank', 0));
        $("#abilityExtraTable_minimumRenown").html(getValueByLabel('minimumRenown', 0));
        var careers = "";
        for (j = 1; j <= 24; j++) {
            if (columnLabelToColumnIdMappings['career.' + j]) {
                var src = "http://dl.dropbox.com/u/8317512/careerIcons/career-icon_" + j + ".gif";
                careers += "<img src='" + src + "' style='width: 20px'/>";
            }
        }
        $("#abilityExtraTable_careers").html(careers);
        var flags = new Array();
        if (getValueByLabel('flags.Healing', 0)) {
            flags.push("Healing");
        }
        if (getValueByLabel('flags.Buff', 0)) {
            flags.push("Buff");
        }
        if (getValueByLabel('flags.StatsBuff', 0)) {
            flags.push("StatsBuff");
        }
        if (getValueByLabel('flags.Offensive', 0)) {
            flags.push("Offensive");
        }
        if (getValueByLabel('flags.Granted', 0)) {
            flags.push("Granted");
        }
        if (getValueByLabel('flags.Defensive', 0)) {
            flags.push("Defensive");
        }
        if (getValueByLabel('flags.Debuff', 0)) {
            flags.push("Debuff");
        }
        if (getValueByLabel('flags.Damaging', 0)) {
            flags.push("Damaging");
        }
        if (getValueByLabel('flags.Passive', 0)) {
            flags.push("Passive");
        }
        if (getValueByLabel('flags.NeedsPet', 0)) {
            flags.push("NeedsPet");
        }
        if (getValueByLabel('flags.Channeled', 0)) {
            flagString += " Channeled,";
        }
        $("#abilityExtraTable_flags").html(flags.join(","));

    }
    );

}

// extract
function getId() {
		var prefs = gadgets.views.getParams();
		if(prefs['id']) {
			return prefs['id'];
		}
    var vars = [],
    parentVars = [],
    hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    var parentURL = unescape(vars['parent']);
    var hashes = parentURL.slice(parentURL.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        parentVars.push(hash[0]);
        parentVars[hash[0]] = hash[1];
    }
    return parentVars['id'];
}

// return a value by label (rather than column index)
function getValueByLabel(lab, row) {
    return dataTable.getValue(row, columnLabelToColumnIdMappings[lab]);
}

</script>

<div id="abilityDetail">

<div id="abilityIconContainer">
<img id="abilityIcon" src=""/>
<img id="abilityIconSurround" src="http://dl.dropbox.com/u/8317512/icons/show_icon_holder.png"/>
</div>

<div id="tt">
  <div id="ttNorth"></div>
  <div id="ttCenter">
    <table id="ttCenterTable">
      <tr class="ttTitleRow"><td id="tooltip_English_name"></td><td id="tooltip_English_type" class="ttRight"></td></tr>
      <tr><td id="tooltip_English_specline"></td><td id="tooltip_English_level" class="ttRight"></td></tr> 
      <tr><td colspan="2"><hr class="ttSeperator" /></td></tr>  
      <tr><td id="tooltip_English_cost"></td><td id="tooltip_English_range" class="ttRight"></td></tr>
      <tr><td id="tooltip_English_casttime"></td><td id="tooltip_English_cooldown" class="ttRight"></td></tr>
      <tr><td id="tooltip_English_requirement1" colspan="2" class="ttRequirementRow"></td></tr>         
      <tr><td id="tooltip_English_requirement2" colspan="2" class="ttRequirementRow"></td></tr>
      <tr><td id="tooltip_English_requirement3" colspan="2" class="ttRequirementRow"></td></tr>
      <tr><td id="tooltip_English_description" colspan="2"></td></tr>
    </table>
  </div>
  <div id="ttSouth"></div>           
</div>

<div id="abilityExtra">
<table id="abilityExtraTable">
<tr><td>Minimum Rank</td><td class="abilityExtraTable_value" id="abilityExtraTable_minimumRank"></td></tr>
<tr><td>Minimum Renown</td><td  class="abilityExtraTable_value"id="abilityExtraTable_minimumRenown"></td></tr>
<tr><td>Careers</td><td  class="abilityExtraTable_value"id="abilityExtraTable_careers"></td></tr>
<tr><td>Flags</td><td  class="abilityExtraTable_value"id="abilityExtraTable_flags"></td></tr>
<tr><td>Delve Statistic</td><td class="abilityExtraTable_value"></td></tr>  
<tr><td>Delve Ratio</td><td class="abilityExtraTable_value"></td></tr>
</table>
</div>

<hr style="border: 1px solid #2f4f72; margin: 32px"/>

<h2 id="commentHeader">Comments (<a href="javascript:alert('Not yet implemted');">add comment</a>)</h2>
<div id="comments">

</div>